<template>
<div class='carts'>
  <div class="search">
    <div class="search_box">
      <div class="search_item">
        <span>用户ID:</span>
        <Input v-model="seachForm.uid"  placeholder="用户ID" />
      </div>
      <div class="search_item">
        <span>产品ID:</span>
        <Input v-model="seachForm.pid" placeholder="产品ID" />
      </div>
      <div class="search_item">
        <span>产品标题:</span>
        <Input v-model="seachForm.pTitle" placeholder="产品标题" />
      </div>
      <br />
      <div class="search_item date">
        <span>创建时间:</span>
         <DatePicker 
          format='yyyy-MM-dd HH:mm:ss'
          type="daterange"
          :options="options2"
          placement="bottom-end"
          placeholder="Select date"
          @on-change="dateChange"
          ></DatePicker>
      </div>
    </div>
    <div class="search_btn">
      <Button type="primary" icon="ios-search" @click="searchFormData">查询</Button>
    </div>
  </div>
  <div class="cartsInfo">
    <Table height="420" :columns="goodsTitle" :data="goods" on-column-width-resize="showText"></Table>
    <div style="float: right; margin-top:10px;">
      <Page :total="page.total" :current="page.page" @on-change="changePage"></Page>
    </div>
  </div>
</div>
</template>

<script>
import conf from '@/api/apiConf'
export default {
  name: 'carts',
  data: () => ({
    value: '',
    goods: [],
    goodsTitle: [{
        title: '商品id',
        width: 100,
        key: 'p_id',
        align: 'center',

        sortable: true,
      },
      {
        title: '产品名称',
        key: 'gc_name',
        align: 'center',
        ellipsis: true,
      },
      {
        title: '产品图片',
        key: 'gc_img',
        align: 'center',

        ellipsis: true,
      },
      {
        title: '产品单价',
        key: 'gc_price',
        align: 'center',

        width: 150,
        sortable: true,
      },
      {
        title: '产品数量',
        key: 'gc_num',
        width: 150,
        align: 'center',

        sortable: true,
      },
      {
        title: '产品金额(￥)',
        key: 'gc_money',
        align: 'center',

        width: 150,
        sortable: true,
      },
      {
        title: '购买人ID',
        key: 'u_id',
        width: 150,
        align: 'center',
        border: true,
        stripe: true,
      },
      {
        title: '购买时间',
        key: 'gc_create',
        align: 'center',
        sortable: true,
        sortType: 'asc',
        ellipsis: true,
      },
    ],
    options2: {
      shortcuts: [
          {
              text: '1 个星期',
              value () {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                  return [start, end];
              }
          },
          {
              text: '1 个月',
              value () {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                  return [start, end];
              }
          },
          {
              text: '3 个月',
              value () {
                  const end = new Date();
                  const start = new Date();
                  start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                  return [start, end];
              }
          }
      ]
    },
    seachForm:{
      uid:'',
      pid:'',
      pTitle:'',
      date:{
        start:'',
        end:'',
      }
    },
    page:{
      size:10,
      page:1,
      total:0,
    }
  }),
  created() {
    this.searchFormData()
  },
  methods: {
    async searchFormData() {
      try {
      let res = await this.$http.post(conf.searchCart,{...this.seachForm,page:this.page})
      if(res.data.status==200){
        this.goods = res.data.res.data
        this.page.total=res.data.res.page.total
      }
      } catch (error) {
        console.log('获取数据失败', error)
      }
    },
    showText(newWidth) {},
    dateChange(val){
      this.seachForm.date.start=val[0]
      this.seachForm.date.end=val[1]
    },
    changePage(page){
      console.log(page);
    }
  },
}
</script>

<style lang="less" scoped>
.carts {
  padding: 10px;
  .search{
    margin-top: 20px;
    .search_box{
      width: 100%;
       .search_item{
          width: 200px;
          display: inline-block;
          margin-right: 20px;
          margin-bottom: 20px;
          text-align: left;
          span{
            display: inline-block;
            width: 60px;
            text-align: end;
          }
          /deep/.ivu-input-wrapper{
            width: 160px;
          }
        }
        .date{
          width: 390px;
          /deep/.ivu-input-wrapper{
            width: 330px;
          }
        }
    }
  }

  button {
    margin-left: 30px;
  }
}

.cartsInfo {
  padding: 20px;
}

.ivu-table-cell {
  white-space: nowrap;
  text-align: center;
}
</style>
